<template>
<div class="container">
    <div class="playground">
        <GameMap />
    </div>
    <div class="row" v-if="!$store.state.record.is_Record">
        <div class="col-6" v-if="$store.state.pk.a_id == $store.state.user.id" style="text-align:center; font-size:30px;color:#fff3cd">
            您是黑棋
        </div>
        <div class="col-6" v-else style="text-align:center; font-size:30px;color:#fff3cd">
            您是白棋
        </div>
        <div class="col-6" style="text-align:center; font-size:30px;color:#fff3cd">
            当前回合：{{piece}}
        </div>
    </div>
</div>
</template>

<script>
import GameMap from "./GameMap.vue"
import {useStore} from "vuex"
import {ref} from "vue"
export default {
    components:{
        GameMap,
    },
    setup(){
        const store = useStore();
        let piece = ref("黑方回合");
        //刚开始就确定一下状态
        store.commit("updatePlayer","1");
        setInterval(() => { //5秒循环100次
            if(store.state.pk.player === "1"){
                piece.value = "黑方回合";
            }else{
                piece.value = "白方回合";
            }
        }, 50);
        
        return{
            piece,
        }
    }
}
</script>

<style scoped>
div.playground{
    width: 70vw;
    height: 80vh;
    background-color: #F5DEB3;
    margin: 20px auto;
}
</style>